import React, { useRef, ReactElement } from "react";
import { ITodo } from "../typings";
import { Button, Space, Input } from "antd";
import { UserOutlined } from "@ant-design/icons";
// 声明当前组件需要用的IProps，它是根据原类型文件来声明的
interface IProps {
  addTodo: (todo: ITodo) => void;
  todoList: ITodo[];
}
// 声明函数组件TdInput 类型是React.FC，使用IProps泛型，将两个参数传入函数，
// 该函数组件返回得到的东西属于react中的ReactElement类型

const TdInput: React.FC<IProps> = ({ addTodo, todoList }): ReactElement => {
  // 赋值使用useref hook 获取到ref={inputRef}中的标签属性，
  const inputRef = useRef<any>(null);
  // 添加事件函数同样注明类型
  // =》1 拿到input中的value  那个!是断言的意思 .trim()去除首尾空格
  // =》2 isExist使用find方法查询值是否重复，并做好提示
  const addItem = (): void => {
    const val: string = inputRef.current!.state.value;
    if (val.length) {
      const isExist = todoList.find((todo) => todo.content === val);
      if (isExist) {
        alert("已存在该项");
      }
      // 3 添加一项，然后置空
      addTodo({
        id: new Date().getTime(),
        content: val,
        completed: false,
        time: new Date().getTime(),
      });
      inputRef.current!.state.value = "";
    }
  };
  return (
    <div className="todo-input">
      <Space>
        <Input
          placeholder="请输入代办项"
          ref={inputRef}
          prefix={<UserOutlined />}
        />
        <Button type="primary" onClick={addItem}>
          增加
        </Button>
      </Space>
    </div>
  );
};
export default TdInput;
